<template>
    <span v-click-outsize>
        <input type="text" :value="selectDate | formatDate">
        <Card class="date-card" v-if="showDateCard">
            <section class="date-header">
                <span @click="() => getOtherMonDay(-1)">&lt;&lt;</span>
                <span>
                    {{ dater.year+'-' + (dater.mon+1) }}
                </span>
                <span @click="() => getOtherMonDay(1)">&gt;&gt;</span>
            </section>
            <section class="date-week-tag">
                <span v-for="item in week" :key="'-' + item">
                    {{ item }}
                </span>
            </section>
            <section class="date-day">
                <section v-for="i in 6" :key="i" class="date-day-row">
                    <span 
                        v-for="j in 7" 
                        :key="j" 
                        :class="{
                            'date-day-item': true,
                            'active': isSelectDay(showDateSource[((i-1)*7 + (j-1))]),
                            'not-cur-mon': !isCurMon(showDateSource[((i-1)*7 + (j-1))])
                        }"
                        @click="() => handleSelectDate(showDateSource[((i-1)*7 + (j-1))])"
                    >
                        {{ showDateSource[((i-1)*7 + (j-1))].getDate() }} 
                        <span class="extra-info">{{ isToday(showDateSource[((i-1)*7 + (j-1))]) ? '今天' : '' }}</span>
                    </span>
                </section>
            </section>
        </Card>
    </span>
</template>

<script>
import Card from '@/components/Card.vue'
import dateUtils from '@/utils/index'
export default {
    name: 'WeekDatePicker',
    components:{
        Card
    },
    directives:{
        clickOutsize:{
            bind(el,binding,vnode){
                const handler = (e) => {
                    if(el.contains(e.target)){
                        !vnode.context.showDateCard && vnode.context.focus()
                    }else{
                        vnode.context.showDateCard && vnode.context.blur()
                    }
                }

                document.addEventListener('click',handler)
            },
            unbind(el){
                document.removeEventListener('click',el.handler)
            }
        }
    },
    props:{
        value:{
            type: [Date,String],
            default: () => (new Date())
        }
    },
    data(){
        return {
            week: '日一二三四五六',
            showDateCard: true,
            selectDate: new Date(),
            dater:{
                year: '',
                mon: ''
            }
        }
    },
    mounted(){
        const { year,month,day } = dateUtils.getYearMonthDay(this.value)
        this.selectDate = new Date(year,month,day)
        this.dater.year = year
        this.dater.mon = month
    },
    computed:{
        showDateSource(){
            const theFirstOfCurMon = new Date(this.dater.year,this.dater.mon,1) // 获取当前月第一天
            let weekDay = theFirstOfCurMon.getDay()
            weekDay = weekDay === 0 ? 7 : weekDay
            let thePanelShowFirstDay = new Date(theFirstOfCurMon.getTime() - weekDay*1000*60*60*24) // 面板显示的第一天
            let theResult = []
            for(let i=0;i<42;i++){
                theResult.push(
                    new Date(thePanelShowFirstDay.getTime() + i*1000*60*60*24)
                )
            }
            return theResult
        },
    },
    filters:{
        formatDate(date){
            return date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate()
        }
    },
    methods:{
        // formatDate(date){
        //     return date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate()
        // },
        focus(){
            this.showDateCard = true
        },
        blur(){
            this.showDateCard = false
        },
        isSelectDay(date){
            return date.getTime() === this.selectDate.getTime()
        },
        isToday(date){
            const { year,month,day } = dateUtils.getYearMonthDay(this.value)
            const { year : cYear,month: cMonth,day: cDay } = dateUtils.getYearMonthDay(date)
            return year === cYear && month === cMonth && day === cDay
        },
        isCurMon(date){
            return this.dater.mon === date.getMonth()
        },
        handleSelectDate(date){
            const { year,month,day } = dateUtils.getYearMonthDay(date)
            this.selectDate = new Date(year,month,day)
        },
        getOtherMonDay(direction){
            const date = new Date(this.dater.year,this.dater.mon + direction)
            const { year,month } = dateUtils.getYearMonthDay(date)
            console.log(year,month);
            this.dater = {
                year,
                mon: month
            }
        }
    }
}
</script>

<style lang="less" scoped>
    * {
        transition: all .2s;
    }
    .date-card {
        position: absolute;
        width: 300px;

        .date-header {
            height: 22px;
            line-height: 22px;
            text-align: center;
            color: #333;
            margin-bottom: 16px;
            span:first-child,
            span:last-child{
                font-weight: 500;
                color: blue;
                cursor: pointer;
            }
        }

        .date-week-tag {
            display: flex;
            justify-content: space-between;
            font-weight: 600;
            margin-bottom: 8px;
            border-bottom: 1px solid #ddd;
            padding-bottom: 8px;
        }

        .date-day-row {
            display: flex;
            justify-content: space-between;
            margin-bottom: 16px;
        }

        .date-day-item {
            width: 30px;
            height: 30px;
            line-height: 30px;
            // background: #ddd;
            text-align: center;
            border-radius: 15px;
            cursor: pointer;
            font-weight: 600;
            position: relative;

            .extra-info {
                position: absolute;
                left: 50%;
                bottom: -60%;
                transform: translate(-50%,0%) scale(0.5);
                font-size: 20px;
                font-weight: 400;
                color: #aaa;
                white-space: nowrap;
                line-height: 14px;
            }

            &:hover {
                color: blue;
                font-weight: 600;
                background: rgb(70, 70, 204);
                color: #fff;
            }
        }

        .date-day-item.active {
            color: blue;
            font-weight: 600;
            background: rgb(70, 70, 204);
            color: #fff;
        }

        .date-day-item.not-cur-mon {
            color: #aaa;
        }
    }
</style>